<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="nav-tabs">
      <router-link 
        to="/personal-race" 
        class="nav-tab" 
        :class="{ active: $route.path === '/personal-race' }"
      >
        <el-icon class="nav-tab-icon"><data-line /></el-icon>
        <span class="nav-tab-text">个人赛</span>
      </router-link>
      <router-link 
        to="/video-playback" 
        class="nav-tab" 
        :class="{ active: $route.path === '/video-playback' }"
      >
        <el-icon class="nav-tab-icon"><video-camera /></el-icon>
        <span class="nav-tab-text">视频回放</span>
      </router-link>
      <div class="theme-toggle">
        <el-tooltip :content="theme === 'dark' ? '切换到浅色' : '切换到深色'" placement="bottom">
          <el-button class="toggle-btn" text @click="toggleTheme">
            <el-icon v-if="theme === 'dark'"><moon /></el-icon>
            <el-icon v-else><sunny /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    
    <!-- 系统标题 -->
    <div class="system-title">
      <div class="connection-status">
        <span class="status-dot"></span>
        <span>系统已连接</span>
      </div>
      
      <div class="title-center">
        <div class="subtitle">轮滑速度过桩</div>
        <h1 class="main-title">{{ pageTitle }}</h1>
      </div>
      
      <div style="width: 130px;">
        <slot name="header-controls"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { Sunny, Moon } from '@element-plus/icons-vue'

const route = useRoute()

// 根据当前路由动态显示标题
const pageTitle = computed(() => {
  if (route.path === '/personal-race') {
    return '个人赛'
  } else if (route.path === '/video-playback') {
    return '视频回放'
  }
  return ''
})

// 主题切换
const theme = ref('light')

function applyTheme(value) {
  const root = document.documentElement
  if (value === 'dark') {
    root.setAttribute('data-theme', 'dark')
  } else {
    root.removeAttribute('data-theme')
  }
}

function toggleTheme() {
  theme.value = theme.value === 'dark' ? 'light' : 'dark'
  localStorage.setItem('ui_theme', theme.value)
  applyTheme(theme.value)
}

onMounted(() => {
  const saved = localStorage.getItem('ui_theme')
  theme.value = saved === 'dark' ? 'dark' : 'light'
  applyTheme(theme.value)
})
</script>

<style scoped>
.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  color: #606266;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(228, 232, 236, 0.8);
  z-index: 5;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #67c23a;
  box-shadow: 0 0 8px #67c23a;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(103, 194, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
  }
}

.theme-toggle {
  position: relative;
  z-index: 5;
}

.toggle-btn {
  color: var(--text-secondary);
}
</style> 